<template>
    <div class= "regionInfoBox">
      <div class= "regionInfoTitle" v-for= "item in navigation_data.titleData" :key= "item.titleId" @click= "item.onClick()">
         <img class= "regionInfoTitleImage" :src= "item.url" alt="">
         <span class= "regionInfoTitleText">{{item.title}}</span>
      </div>  
      <div class="regionInfoDetail">
        <div class= "regionInfoTitleNoBorderBottom" >
           <img class= "regionInfoTitleImage" :src= "navigation_data.detailTitle.url" alt="">
           <span class= "regionInfoTitleText">{{navigation_data.detailTitle.title}}</span>
        </div>
        <div class= "regionInfoItem"  @click= "selectAll()">
          <span :class= "isSelectedAll ?'unselectedState selectedState ':'unselectedState'"></span>
          <span :class= "isSelectedAll ?'regionName regionNameSelectedState':'regionName'">全部</span>
        </div>
        <el-tree ref= "tree" :data= "navigation_data.treeData" :props= "navigation_data.defaultProps" @node-click= "handleNodeClick"></el-tree>
      </div>
    </div>
</template>

<script>
import bus from '../../eventBus'
export default {
  name: 'rightNavigation',
  data(){
    return{          
      isSelectedAll:false,//是否选择全部
      totalTreeState:{},
      //例子
      // navigation_data:{
      // treeData: [{
      //     label: '一级 1',
      //     children: [{
      //       label: '二级 1-1',
      //       children: [{
      //         label: '三级 1-1-1'
      //       }]
      //     }]
      //   }, {
      //     label: '一级 2',
      //     children: [{
      //       label: '二级 2-1',
      //       children: [{
      //         label: '三级 2-1-1'
      //       }]
      //     }, {
      //       label: '二级 2-2',
      //       children: [{
      //         label: '三级 2-2-1'
      //       }]
      //     }]
      //   }, {
      //     label: '一级 3',
      //     children: [{
      //       label: '二级 3-1',
      //       children: [{
      //         label: '三级 3-1-1'
      //       }]
      //     }, {
      //       label: '二级 3-2',
      //       children: [{
      //         label: '三级 3-2-1'
      //       }]
      //     }]
      //   }],
      // defaultProps: {
      //   children: 'children',
      //   label: 'label'
      // },
      // titleData:[
      //   {
      //     title:'环保区域',
      //     url:'../../assets/environmentProtect.png'
      //   },
      //   {
      //     title:'预案',
      //     url:'../../assets/environmentProtect.png'
      //   },
      // ],
      // detailTitle:{  
      //   title:'地标',
      //   url:'../../assets/environmentProtect.png',
      // }
      // }
    }
  },
  props:{
    navigation_data:{
      type:Object,
      default:null,
    },
  },
  created(){
    let _this = this;
    bus.$on('rememberTreeState',(val)=>{
      val(_this.rememberTotlaTreeState());
    })
    bus.$on('getNavigationData',(val)=>{
      val(_this.navigation_data);
    })

    bus.$on('initNavigationData',(data)=>{
      _this.navigation_data = data;
    });
    bus.$on('initTotalTreeState',(state)=>{
      _this.initTreeState(_this.$refs.tree.store.root,state);
    })
  },
  methods:{
    //点击tree的最后一层
    handleNodeClick(node,data,value) {
      if(value.node.isLeaf){
        if(value.node.checked){
           if(value.node.data.onUnChecked){
            value.node.data.onUnChecked();
          }
          value.node.checked =false;
        }else{
          value.node.checked =true;
          if(value.node.data.onChecked){
            value.node.data.onChecked();
          }
        }    
      }
    },
    //选择全部
    selectAll(){
      this.isSelectedAll = !this.isSelectedAll;  
      this.expandTreeNode(this.$refs.tree.store.root);
    },
    //展开node的所有子节点,并选择叶子
    expandTreeNode(node){
      //改变节点及子节点的expanded和checked状态
      if(node.childNodes.length>0){
        node.expanded = this.isSelectedAll;
        node.loaded = this.isSelectedAll;
        node.childNodes.forEach(element=>{
          this.expandTreeNode(element);
        });
      }else{
        node.checked = this.isSelectedAll;
        node.loaded = this.isSelectedAll;
        if(node.data.onChecked && this.isSelectedAll){
            node.data.onChecked();
          }else if(node.data.onUnChecked && !this.isSelectedAll){
            node.data.onUnChecked();
        }    
      }
    },
    //记录node的展开和选择状态  0代表未选择或未展开  1代表已选择和展开 []
    rememberTreeState(node){
      let state = {};
      let childrenState = [];
      node.childNodes.forEach(element => {
        childrenState.push(this.rememberTreeState(element));
      });
      if(node.expanded || node.checked){   
        state.selfState =1;
      }else{
        state.selfState =0;
      }
      state.childrenState = childrenState;
      return state;
    },
    //根据传入的state对node的状态初始化,层数要对应，不然会出错
    initTreeState(node,state){
      let isSelected = state.selfState == 1;
      if(node.childNodes.length>0){
        node.expanded = isSelected;
        node.loaded = isSelected;
        node.childNodes.forEach((element,index)=>{
          if(state.childrenState.length-1 < index){
            throw new Error("传入的state和node不匹配");
          }else{
            this.initTreeState(element,state.childrenState[index]);
          }
        });
      }else{
        node.checked = isSelected;
        node.loaded = isSelected;
        if(node.data.onChecked && isSelected){
            node.data.onChecked();
          }else if(node.data.onUnChecked && !isSelected){
            node.data.onUnChecked();
        }    
      }
    },

    //记录整棵树的状态
    rememberTotlaTreeState(){
      this.totalTreeState =  this.rememberTreeState(this.$refs.tree.store.root);
      return this.totalTreeState;
    },
    //初始化整棵树的状态
    initTotalTree(){
      this.initTreeState(this.$refs.tree.store.root,this.totalTreeState);
    },
  }
}
</script>

<style scoped lang='scss'>
    .regionInfoBox{
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 437px;
    position: fixed;
    top: 99px;
    right: 33px;
    background-image: url('../../assets/regionBackground.png');
    background-size: 100% 100%;
  }

  .regionInfoTitle{
    height: 20px;
    width: 100%;
    padding:0 33px;
    box-sizing: border-box;
    margin: 20px 0  17px  0 ;
    text-align: left;
    line-height: 20px;
    cursor: pointer;
  }

  .regionInfoTitle::after{
    content: '';
    display: block;
    width: 100%;
    padding-top: 17px;   
    border-bottom:2px solid #4a638b;  
  }

   .regionInfoTitleNoBorderBottom{
    height: 20px;
    width: 100%;
    margin: 10px 0  17px  0 ;
    text-align: left;
    line-height: 20px;
  }

  .regionInfoTitleImage{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 6px 0 0;
    vertical-align: middle;
  }

  .regionInfoTitleText{
    display: inline-block;
    font-size: 16px;
    color: #fff;   
  }

  .regionInfoDetail{
    width: 100%;
    padding: 0 33px ;
    box-sizing: border-box;
    margin: 10px 0;
    flex: 1;
    overflow-x:hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling : touch; 
  }

  .regionInfoItem{
    margin: 9px 10px;
    width: 100%;
    display: flex;
    cursor: pointer;
  }
  .unselectedState{
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
    background: rgba(32, 61, 106, 0.1);
    border: 1px solid #FFFFFF;
  }

  .selectedState{
    border: 1px solid #008fff;
    background-image: url('../../assets/tick.png');
    background-size: 100% 100%;
  }

  .regionName{
    display: inline-block;
    flex: 1;
    margin-left: 13px;
    line-height: 17px;
    font-size: 16px;
    color: #fff;
    text-align : left;
    word-wrap: break-all;
  }

  .regionNameSelectedState{
    color: #008fff;
  }
  
  // el-tree 样式修改
   ::v-deep .el-tree{
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 9px;
    box-sizing: border-box;
    background: none  ;  
    overflow-x:scroll;
    -webkit-overflow-scrolling : touch; 
  }

  ::v-deep .el-tree-node>.el-tree-node__children{
    overflow: visible;
  }

   ::v-deep .el-tree-node__content>.el-tree-node__expand-icon{
    padding: 0;
    transform: none;
  }

  ::v-deep .el-tree-node__label{
    display: inline-block;
    margin:0  0 0 13px;
    line-height: 15px;
    font-size: 16px;
    color: #fff;
    text-align : left;
    word-wrap: break-all;
  }
 ::v-deep .el-tree-node__content::before{
   content: '';
   display: inline-block;
  //width: 9px;  用padding撑开，设定width在label过长时会压缩掉
   padding-right:9px;
   height: 20px;
   margin:0 0 20px 0;
   border-bottom: 1px solid  #95a2b7;
   border-left: 1px solid  #95a2b7;
 }

 //隐藏第一级外
 ::v-deep .el-tree>.el-tree-node >.el-tree-node__content::before{
   display: none;   
 }

 ::v-deep .el-tree>.el-tree-node >.el-tree-node__content{
   padding-left: 10px !important;
 }

 ::v-deep .el-icon-caret-right::before{
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    padding: 0;
    background-color: rgba(32, 61, 106, 1);
    border: 1px solid #a9b3c4;
    transform: none;
    background-image: url('../../assets/add.png');
    background-size: 100% 100%;
 }

 ::v-deep .is-expanded>.el-tree-node__content>.el-icon-caret-right::before{
   background-image: url('../../assets/del.png');
   background-size: 100% 100%;
 }

 ::v-deep .el-tree-node__content>.is-leaf::before{
   background-image: none;
 }

//改变选择状态下的label颜色
 ::v-deep .is-checked>.el-tree-node__content>.el-tree-node__label{
   color: #008fff ;
 }
//改变选择状态下的toggle背景图
::v-deep .is-checked>.el-tree-node__content>.el-icon-caret-right::before{
    background-image: url('../../assets/tick.png') ;
    background-size: 100% 100%;
    border: 1px solid #008fff !important;
}

//点击背景颜色
::v-deep .el-tree-node__content{
  background-color: rgba(32, 61, 106, 0) !important;
}

::v-deep .el-tree-node__children>.el-tree-node:nth-child(n+2)>.el-tree-node__content::before{
    height: 26px;
    margin:0 0 25px 0;
}

//滑动条
/* 整个页面的滑动条修改*/
   ::-webkit-scrollbar { 
    width: 5px;
    height: 5px;
  } 

   /* --修改 滚动条的 下面 的 样式 */
  ::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0);
    border-radius: 10px;
  }

  /* // <!--修改 滑块 --> */
  ::-webkit-scrollbar-thumb {
    background-color: #0d51c3;
    border-radius: 10px; 
  }
</style>